<?php
//======================================================================================
//
// Function: List data
//
// Programmer: JKJ
// Date : 2020-06-29
//
// Copyright Reeft A/S (c) - 2020
//======================================================================================
// SELECT a.fk_reference, a.line_status,sum(a.prv_seconds) as sec_per_fk_reason, a.fk_reason, b.reasontext as b_reasontext
// FROM visual_line_status_temp_detail_48a08e8170adc9f572b443af a
// join visual_reason_codes b on b.pk_reason = a.fk_reason
// WHERE line_status = 1004
// group by a.fk_reference, a.fk_reason
// order by a.fk_reference, sec_per_fk_reason desc
//======================================================================================
//
// This program can run in two modes:
//
// Normal online mode and overview mode.
// this is controlled by the variable run_as_overview and function runAsOverview
// run_as_overview is used on various places in the program to cont layout and likewise.
// When the program runs in overview mode the function "updateChart_reason_bar" is used to
// update the bar to save performance
//
// Input param Valid Values Description
// ----------------- ----------------- ----------------------------------------------------------------
// run_as_overview Y/N Run as overview or not
// backTime 48,24,12,8,1 Hours to look back for from date
// datamode *count/*seconds Show charts in number of or time of
// updateseq must be bigger How often the charts should update
// than 5 in seconds - default is 15
//
//======================================================================================
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
// http://www.tl-it.nl/docs/files/jqplot-core-js.html#Series.yaxis
// http://www.jqplot.com/docs/files/jqplot-core-js.html
// Chart.js
// https://www.chartjs.org/docs/latest/axes/styling.html?h=grid
// https://jsfiddle.net/crabbly/kL68ey5z/ -- PDF save
// https://github.com/emn178/chartjs-plugin-labels - text on pie
// https://emn178.github.io/chartjs-plugin-labels/samples/demo/
// https://stackoverflow.com/questions/34479079/how-do-i-find-last-monday-using-momentjs
//======================================================================================
// General config
//======================================================================================
include "config/config.php";
//======================================================================================
// Get input
//======================================================================================
// if (isset($_REQUEST["fk_reference"])) $fk_reference = $_REQUEST["fk_reference"];
// else $fk_reference = 'N';
$fk_reference = 1;
if (isset($_REQUEST["fromdate"])) $fromDate = $_REQUEST["fromdate"];
else $fromDate = 0;
if (isset($_REQUEST["todate"])) $toDate = $_REQUEST["todate"];
else $toDate = 0;
if (isset($_REQUEST["run_as_overview"])) $run_as_overview = $_REQUEST["run_as_overview"];
else $run_as_overview = 'N';
if (isset($_REQUEST["showchart"])) $showChart = $_REQUEST["showchart"];
else $showChart = '*PIE';
if (isset($_REQUEST["backtime"])) $backTime = $_REQUEST["backtime"];
else $backTime = 24;
if (isset($_REQUEST["datamode"])) $datamode = $_REQUEST["datamode"];
else $datamode = '*seconds';
if (isset($_REQUEST["updateseq"])) $updateSeq = $_REQUEST["updateseq"];
else $updateSeq = 15;
if (isset($_REQUEST["referencestring"])) $referenceString = $_REQUEST["referencestring"];
else {
$referenceString = "";
}
if (isset($_REQUEST["referencestringname"])) $referenceStringName = $_REQUEST["referencestringname"];
else {
$referenceStringName = "";
}
if (isset($_REQUEST["what_to_show"])) $what_to_show = $_REQUEST["what_to_show"];
else {
$what_to_show = "*STATUS_PIE";
}
if (isset($_REQUEST["dft_shift_nr"])) $dft_shift_nr = $_REQUEST["dft_shift_nr"];
else {
$dft_shift_nr = 0;
}
if (isset($_REQUEST["dft_shift_name"])) $dft_shift_name = $_REQUEST["dft_shift_name"];
else {
$dft_shift_name = '';
}
if (isset($_REQUEST["data_slicing"])) $data_slicing = $_REQUEST["data_slicing"];
else {
$data_slicing = '*CALENDAR';
}
if (isset($_REQUEST["slice_value"])) $slice_value = $_REQUEST["slice_value"];
else {
$slice_value = 2;
}
//======================================================================================
// Check input
//======================================================================================
if ( $run_as_overview <> 'Y' and $run_as_overview <> 'N' ) {
$run_as_overview = 'N';
}
// Check the rest if running as overview
if ( $run_as_overview == 'Y' )
{
// Chart to show (*REASON / *PIE)
if ( $showChart <> '*REASON' and $showChart <> '*PIE' ) {
$showChart = '*REASON';
}
// Backtime (default is 24)
if ( $backTime <> 48 and $backTime <> 24 and $backTime <> 12 and $backTime <> 8 and $backTime <> 1 ) {
$backTime = 24;
}
// Data mode
if ( $datamode <> '*count' and $datamode <> '*seconds' ) {
$datamode = '*count';
}
// Update sequence - min is 5000 (5 seconds)
if ( $updateSeq < 5 ) {
$updateSeq = 15;
}
}
//======================================================================================
// Set header texts
//======================================================================================
if ( $referenceStringName == '' ) {
$referenceStringName = $referenceString;
}
$referenceStringNamePretty = str_replace('|', ',',$referenceStringName);
//======================================================================================
// Check if user is logged in?
//======================================================================================
include "login_check.php";
//======================================================================================
// Get session variables
//======================================================================================
include "include/getsession.php";
$datahub_text0108 = 'Jan';
$session_dft_referencecode = 'jan_1';
$session_dft_referencename = 'Jan_og_Jan';
//======================================================================================
// Set language
//======================================================================================
include "include/set_language.php";
// Make kl lowercase
$datahub_text0108_lower = strtolower($datahub_text0108);
//======================================================================================
// Set defaults
//======================================================================================
$referenceCode = $session_dft_referencecode;
$referenceName = $session_dft_referencename;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $reeft_stoptime_title ?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="REEFTvisual - Stoptime">
<meta name="author" content="REEFT A/S">
<link rel="icon" href="images/favicon.ico">
<link href="css/custom.css" rel="stylesheet">
<!-- Bootstrap / jQuery -->
<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
<!--<link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">-->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome6/css/all.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome6/css/sharp-solid.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap_animation/css/animate.css" rel="stylesheet" type="text/css">
<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">
<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery-2.2.4.min.js"></script>
<script src="css/bootstrap4.3.1/js/popper.js"></script>
<script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>
<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
<script src="javascript/jquery.ui.touch-punch.min.js"></script>
<!--<script src="javascript/moment.min.js"></script>-->
<script src="javascript/moment-with-locales.min.js"></script>
<script src="javascript/moment-duration-format.min.js"></script>
<script src="javascript/number_format/jquery.number.min.js"></script>
<script src="javascript/jquery.scrollTo.min.js"></script>
<script src="javascript/bootstrap-datetimepicker4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="javascript/bootstrap-datetimepicker4/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/media/css/fixedHeader.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="javascript/daatatables/Buttons-1.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="javascript/daatatables/media/js/jquery.dataTables.min.js"></script>
<script src="javascript/daatatables/media/js/dataTables.fixedHeader.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/dataTables.buttons.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.flash.min.js"></script>
<script src="javascript/daatatables/JSZip-2.5.0/jszip.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/pdfmake.min.js"></script>
<script src="javascript/daatatables/pdfmake-0.1.53/vfs_fonts.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.html5.min.js"></script>
<script src="javascript/daatatables/Buttons-1.4.2/js/buttons.print.min.js"></script>
<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src="javascript/viewer-master/dist/viewer.min.js"></script>
<link href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">
<script src="javascript/ajaxq/ajaxq.js"></script>
<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
<script src="javascript/shortcut.js"></script>
<!-- Chart js setup -->
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>-->
<!--<script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-labels.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>-->
<script type="text/javascript" src="javascript/chart.js_master/chart.min.js"></script>
<!--<script type="text/javascript" src="javascript/chart.js_master/chart.min_v2.9.4.js"></script>-->
<script type="text/javascript" src="javascript/chart.js_master/utils.js"></script>
<script type="text/javascript" src="javascript/jspdf.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-datalabels.min.js"></script>
<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
<style>
.image-style-custom
{
filter: drop-shadow(6px 6px 5px black)
}
.dropdown-item.active {
background-color: ForestGreen;
}
.btn-custom-wide {
height:60px;
width:210px;
}
.small-text {
font-size: 8px;
}
</style>
<script language="JavaScript">
//=============================================================================
// Globals
//=============================================================================
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
//topDistance: '1800', // Distance from top before showing element (px)
//topSpeed: 300, // Speed back to top (ms)
scrollDistance: '300', // Distance from top before showing element (px)
scrollSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: false, //'Scroll to top', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
load = 0;
//-----------------------------------------------------------------------------------------
// Input params
//-----------------------------------------------------------------------------------------
var global_fk_reference = '<?php echo $fk_reference ?>';
var global_fromDate = '<?php echo $fromDate ?>';
var global_toDate = '<?php echo $toDate ?>';
var global_referenceString = '<?php echo $referenceString ?>';
var global_referenceStringName = '<?php echo $referenceStringName ?>';
var global_referenceStringNamePretty = '<?php echo $referenceStringNamePretty ?>';
var global_DFT_ACTIVE_ADD_IMAGE = '';
var global_what_to_show = '<?php echo $what_to_show ?>';
var global_dft_shift_nr = '<?php echo $dft_shift_nr ?>';
var global_dft_shift_name = '<?php echo $dft_shift_name ?>';
var global_data_slicing = '<?php echo $data_slicing ?>';
var global_slice_value = '<?php echo $slice_value ?>';
var ary_DFT_SHIFT_NR = 1;
var ary_DFT_SHIFT_NAME = 'Dag';
var ary_DFT_WORK_DAY_START = '06:00';
var ary_DFT_WORK_DAY_END = '18:00';
var DFT_EXPORT_TO_CSV = 'Y';
var DFT_EXPORT_TO_CSV_FIELDSEPARATOR = '|';
//-----------------------------------------------------------------------------------------
//=============================================================================
// Misc chart setup
//=============================================================================
var DFT_DISPLAY_PARETO_ON_BAR_CHART = 'Y';
var DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME = 'Y';
var DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART = 'Y';
var RUN_MODE = '*seconds';
if ( DFT_DISPLAY_PARETO_ON_BAR_CHART == 'Y' ) {
var displayPareto = true;
} else {
var displayPareto = false;
}
if ( DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART == 'Y' ) {
var dftDisplayLablesOnParetoChartOnBarChart = true;
} else {
var dftDisplayLablesOnParetoChartOnBarChart = false;
}
if ( RUN_MODE == '*seconds' ) {
if ( DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME == 'Y' ) {
var dftDisplayTicksOnRightSideBarChartForTime = true;
} else {
var dftDisplayTicksOnRightSideBarChartForTime = false;
}
} else {
var dftDisplayTicksOnRightSideBarChartForTime = true;
}
//-----------------------------------------------------------------------------------------
// Reset chart objects
//-----------------------------------------------------------------------------------------
var chart_bar = null;
var chart_bar_1 = null;
var chart_pie = null;
var chartPDFname = null;
//-----------------------------------------------------------------------------------------
// Move PHP arrays to javascript
//-----------------------------------------------------------------------------------------
var ary_DFT_SHIFT_NR = 1
var ary_DFT_SHIFT_NAME = 'DAG'
var ary_DFT_WORK_DAY_START = '06:00';
var ary_DFT_WORK_DAY_END = '18:00';
var DFT_CANVAS_HEIGHT = '<?php echo $DFT_CANVAS_HEIGHT; ?>';
var DFT_DURATIONTIME = <?php echo $DFT_DURATIONTIME; ?>;
var DFT_PIE_TITLE_HEADER_DISPLAY = '<?php echo $DFT_PIE_TITLE_HEADER_DISPLAY; ?>';
var DFT_LEGEND_POSITION_DISPLAY = '<?php echo $DFT_LEGEND_POSITION_DISPLAY; ?>';
var DFT_LEGEND_POSITION = '<?php echo $DFT_LEGEND_POSITION; ?>';
//-----------------------------------------------------------------------------------------
// Overview parameters and fields
//-----------------------------------------------------------------------------------------
var run_as_overview = '<?php echo $run_as_overview ?>'
var backTime = '<?php echo $backTime ?>'
var dataMode = '<?php echo $datamode ?>'
var updateSeq = '<?php echo $updateSeq ?>'
var showChart = '<?php echo $showChart ?>'
//-----------------------------------------------------------------------------------------
// Msic chart setup
//-----------------------------------------------------------------------------------------
var DFT_DISPLAY_LABLES_ON_PIE_CHART = '<?php echo $DFT_DISPLAY_LABLES_ON_PIE_CHART; ?>';
if ( DFT_DISPLAY_LABLES_ON_PIE_CHART == 'Y' ) {
var dftDisplayLablesOnPieChart = true;
} else {
var dftDisplayLablesOnPieChart = false;
}
//-----------------------------------------------------------------------------------------
var globalbarData = null;
var globalbarData1 = null;
var globalbarColor = null;
var globalbarLabelText = null;
//-----------------------------------------------------------------------------------------
// General chart settings - also look in .ready for more settings and hiding
//-----------------------------------------------------------------------------------------
if ( run_as_overview == 'N' ) {
durationTime = 2000;
pie_title_header_display = true;
legend_position = 'top';
legend_position_display = true;
} else {
durationTime = DFT_DURATIONTIME;
pie_title_header_display = DFT_PIE_TITLE_HEADER_DISPLAY;
legend_position_display = DFT_LEGEND_POSITION_DISPLAY;
legend_position = DFT_LEGEND_POSITION;
}
//-----------------------------------------------------------------------------------------
var referenceCode = '<?php echo $session_dft_referencecode ?>';
var fk_reference = 1;
var pieData = null;
var pieColor = null;
var pieToolTip = null;
var maxValueBar = 0;
var pie_plot;
var bar_plot;
var DFT_LINE_STATUS_BGCOLOR_1001 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1001 ?>';
var DFT_LINE_STATUS_BGCOLOR_1002 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1002 ?>';
var DFT_LINE_STATUS_BGCOLOR_1003 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1003 ?>';
var DFT_LINE_STATUS_BGCOLOR_1004 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1004 ?>';
var DFT_LINE_STATUS_BGCOLOR_1014 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1014 ?>';
var DFT_LINE_STATUS_BGCOLOR_1015 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1015 ?>';
var DFT_LINE_STATUS_BGCOLOR_1016 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1016 ?>';
var DFT_LINE_STATUS_BGCOLOR_9999 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_9999 ?>';
var DFT_LINE_STATUS_BGCOLOR_1103 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1103 ?>';
var DFT_LINE_STATUS_BGCOLOR_1104 = '<?php echo $DFT_LINE_STATUS_BGCOLOR_1104 ?>';
// Set device mode
var isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
var isMobileText = '*mobile';
} else {
var isMobileText = '*not_mobile';
}
//=============================================================================
// Get data
//=============================================================================
function getData_REASON()
{
// Reset transaction area
$('#data-result-trans').html('');
// Hide save button
$('#downloadPdf').addClass('d-none');
// From / to date
var fk_reference = <?php echo $fk_reference ?>;
var mode = '<?php echo $datamode ?>';
var fromDate = '<?php echo $fromDate ?>';
var toDate = '<?php echo $toDate ?>';
$('#data-result').html('<?php echo $datahub_text0003 ?>').addClass('text-center');
$('#show-chart-here').html('');
if ( mode == '*seconds') {
pie_title_header = '<?php echo $datahub_text0078 ?>';
chartPDFname = 'chart_run_status_pie_time.pdf';
}
else if ( mode == '*count') {
pie_title_header = '<?php echo $datahub_text0079 ?>';
chartPDFname = 'chart_run_status_pie_amount.pdf';
} else {
pie_title_header = '<?php echo $datahub_text0078 ?>';
chartPDFname = 'chart_run_status_pie_time.pdf';
$('#mode-input').val('*seconds');
}
// Set pie header
//var referenceName = $('#reference-name-input').val();
pie_title_header = pie_title_header + ' (' + global_referenceStringNamePretty + ' - ' + fromDate + ' / ' + toDate + ')' ;
// Create param list
parmData = 'fk_reference=' + <?php echo $fk_reference ?>
+ '&fromdate=' + '<?php echo $fromDate ?>'
+ '&todate=' + '<?php echo $toDate ?>'
+ '&mode=' + '<?php echo $datamode ?>'
+ '&referencestring=' + '<?php echo $referenceString ?>'
+ '&dft_shift_nr=' + global_dft_shift_nr
+ '&dft_shift_name=' + global_dft_shift_name
+ '&data_slicing=' + global_data_slicing
+ '&slice_value=' + global_slice_value
;
$.ajax({
url: "list_data_detail.php",
type: "GET",
data: parmData,
dataType: "xml",
cache: false,
beforeSend: function( xhr ) {
}
})
.done(function( xml ) {
processReasonData();
})
.always(function( xml ) {
//console.log('I am always..');
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Get data for reason
//=============================================================================
function processReasonData()
{
mode = '<?php echo $datamode ?>';
fromDate = '<?php echo $fromDate ?>';
toDate = '<?php echo $toDate ?>';
if ( mode == '*seconds') {
//$('#set-as-seconds').addClass('btn-success');
bar_title_headerText = '<?php echo $datahub_text0160 ?>';
maxValueBarAdjust = 10;
maxValueBarAdjustMobile = 5;
pointLabelsShow = false;
barLabelText = '<?php echo $datahub_text0155 ?>';
yAxesDisplay = false;
gridLinesDisplay = false;
chartPDFname = 'chart_reason_bar_seconds.pdf';
}
if ( mode == '*count') {
//$('#set-as-count').addClass('btn-success');
bar_title_headerText = '<?php echo $datahub_text0161 ?>';
maxValueBarAdjust = 10;
maxValueBarAdjustMobile = 1;
pointLabelsShow = true;
barLabelText = '<?php echo $datahub_text0002 ?>';
yAxesDisplay = true;
gridLinesDisplay = true;
chartPDFname = 'chart_reason_bar_count.pdf';
}
// Set bar header
bar_title_header = bar_title_headerText + ' (' + global_referenceStringNamePretty + ' - ' + global_fromDate + ' / ' + global_toDate + ')' ;
if ( global_data_slicing == '*CALENDAR') {
bar_title_header = bar_title_header + ' (' + global_referenceStringNamePretty + ' - ' + fromDate + ' / ' + toDate + ')' + ' <?php echo $datahub_text0177 ?>: ' + global_dft_shift_name;
}
if ( global_data_slicing == '*SLICING') {
bar_title_header = bar_title_header + ' (' + global_referenceStringNamePretty + ' - ' + fromDate + ' / ' + toDate + ')' + 'datahub_text0300' + global_slice_value/60 + 'visual_hours';
}
if ( global_data_slicing == '*DATETIME') {
bar_title_header = bar_title_header + ' (' + global_referenceStringNamePretty + ' - ' + fromDate + ' / ' + toDate + ')';
}
// Create param list
parmData = 'hub_WEBNAM=' + ''
+ '&myPageGoTo=' + '0'
+ '&myOffSet=' + '0'
+ '&myPageSize=' + '500'
+ '&search_arg=' + ''
+ '&orderBy=' + '2'
;
$.ajax({
url: "HUB_WEBCNT_maintain_get.php",
type: "GET",
data: parmData,
dataType: "json",
cache: false,
beforeSend: function( xhr ) {
}
})
.done(function( jsonData ) {
var returnCode = jsonData.header.returnCode;
// Define arrays
arr = [];
arr1 = [];
arr2 = [];
arrColor = [];
arrToolTip = [];
total_time = 0;
total_time_1 = 0;
myID = '';
c = 0;
default_color = '';
// Set header according to mode
if ( mode == '*seconds') {
var headerText01 = '<?php echo $datahub_text0011 ?>';
var headerText02 = '<?php echo $datahub_text0002 ?>';
}
else if ( mode == '*count') {
var headerText01 = '<?php echo $datahub_text0002 ?>';
var headerText02 = '<?php echo $datahub_text0011 ?>';
}
var myID = 'all-button-detail';
// Reset
HTMLline02 = '<table id="REEFTvisual_data" class="table table-bordered table-striped table-hover">';
HTMLline02 += '<thead>'
+ '<tr class="bg-primary text-white font-weight-bold text-left">'
+ '<th>'
+ '<?php echo $datahub_text0178 ?>'
+ '</th>'
+ '<th>'
+ headerText01
+ '</th>'
+ '<th>'
+ headerText02
+ '</th>'
+ '<th class="text-left">'
+ '<button id="' + myID + '" onclick="getStatusDetails(\'' + '*all' + '\',\'' + myID + '\')" class="btn btn-dark line-trans-button-list">datahub_text0102</button>'
+ '</th>'
+ '</tr>'
+ '</thead>'
+ '<tbody>'
;
$.each( jsonData.data, function( index, object ){
//var fk_reference = object.fk_reference;
var line_status = '';
var sec_per_fk_reason = object.HUB_COUNT;
var sec_per_fk_reason_text = object.HUB_COUNT;
var count_per_fk_reason = object.HUB_COUNT;
var fk_reason = object.HUB_SERTYP ;
// Reason code data
var reasontext = object.HUB_WEBNAM;
var default_color = '#ff00ff';
var default_color = object.HUB_CHRCOL;
// var total_sec_per_fk_reason = object.total_sec_per_fk_reason;
// var calc_sum = object.calc_sum;
// var pareto_pct = object.pareto_pct;
var total_sec_per_fk_reason = object.HUB_COUNT;
var calc_sum = object.calc_sum;
var pareto_par = object.calc_par;
var pareto_pct = object.calc_pct;
// var total_count_per_fk_reason = object.total_count_per_fk_reason;
// var calc_sum_count = object.calc_sum_count;
// var pareto_pct_count = object.pareto_pct_count;
var total_count_per_fk_reason = object.HUB_COUNT;
var calc_sum_count = object.HUB_COUNT;
var pareto_pct_count = 20.20;
//console.log(fk_reference + ' ' + line_status + ' ' + sec_per_fk_reason + ' ' + count_per_fk_reason);
console.log(line_status + ' ' + sec_per_fk_reason + ' ' + sec_per_fk_reason_text + ' ' + count_per_fk_reason + ' ' + pareto_pct + ' ' + pareto_pct_count);
// Just in case
if ( default_color == '' ) {
default_color = 'tomato';
console.log('Default color added...')
}
if ( displayPareto == false ) {
var pareto_pct = -1;
}
var color = default_color;
// Set array
if ( mode == '*seconds') {
arr.push(parseInt(sec_per_fk_reason));
if ( isMobileText == '*mobile') {
arr1.push(reasontext);
} else {
arr1.push(reasontext + ' ' + sec_per_fk_reason_text);
}
arr2.push(parseFloat(pareto_pct));
} else {
arr.push(parseInt(count_per_fk_reason));
arr1.push(reasontext);
arr2.push(parseFloat(pareto_pct_count));
}
arrColor.push(color);
arrToolTip.push('none');
// What to show of number
if ( mode == '*seconds') {
var number_to_show = sec_per_fk_reason_text;
var number_to_show_1 = count_per_fk_reason;
total_time = parseInt(total_time) + parseInt(sec_per_fk_reason); // Add to total
total_time_1 = parseInt(total_time_1) + parseInt(count_per_fk_reason); // Add to total
} else {
var number_to_show = count_per_fk_reason;
var number_to_show_1 = sec_per_fk_reason_text;
total_time = parseInt(total_time) + parseInt(count_per_fk_reason); // Add to total
total_time_1 = parseInt(total_time_1) + parseInt(sec_per_fk_reason); // Add to total
}
// Button id
c++;
myID = 'trans-button-' + c;
HTMLline02 += '<tr>'
+ '<td class="text-left">'
+ reasontext
+ '</td>'
+ '<td class="text-center">'
+ number_to_show
+ '</td>'
+ '<td class="text-center">'
+ number_to_show_1
+ '</td>'
+ '<td class="text-left">'
//+ '<button class="btn btn-primary trans-button-list" id="' + myID + '" onclick="getTranscationsData(\'' + fk_reason + '\'' + ',\'' + myID + '\')">' + '<?php echo $datahub_text0102 ?>' + '</button>'
+ '<button class="btn btn-primary trans-button-list line-trans-button-list" id="' + myID + '" onclick="getStatusDetails(\'' + fk_reason + '\'' + ',\'' + myID + '\')">' + '<?php echo $datahub_text0102 ?>' + '</button>'
+ '</td>'
+ '</tr>'
;
});
// Create table total
if ( mode == '*seconds') {
var total_time_text = moment.duration(total_time, 'seconds').format("HH:mm:ss",{trim: false});
var total_time_text_1 = total_time_1;
} else {
var total_time_text = total_time;
var total_time_text_1 = moment.duration(total_time_1, 'seconds').format("HH:mm:ss",{trim: false});
}
HTMLline02 += '</tbody>'
+ '<tfooter>'
+ '<tr class="bg-primary text-white">'
+ '<td class="text-left font-weight-bold">'
+ 'Total'
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ total_time_text
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ total_time_text_1
+ '</td>'
+ '<td class="text-center font-weight-bold">'
+ ''
+ '</td>'
+ '</tr>'
;
HTMLline02 += '</tfooter>'
+ '</table>'
// Show yourself to the world, you little fvcker
$('#data-result').html(HTMLline02);
setDataTablesReason();
if ( mode != '*seconds') {
maxValueBar = Math.max.apply(Math,arr);
maxValueBar = parseInt(maxValueBar) + 1;
} else {
maxValueBar = 0;
}
// Create chart
barData = arr;
barData1 = arr1;
barData2 = arr2;
barColor = arrColor;
barToolTip = arrToolTip;
// Save for update data
globalbarData = barData;
globalbarData1 = barData1;
globalbarData2 = barData2;
globalbarColor = barColor;
globalbarLabelText = barLabelText;
// Get max value from array and adjust a bit to look good
if ( mode == '*seconds') {
if ( maxValueBar > 1000 ) {
maxValueBar = Math.max.apply(Math,barData) + maxValueBarAdjust;
} else {
maxValueBar = Math.max.apply(Math,barData) + maxValueBarAdjustMobile;
}
}
// Reset messasge area
$('#canvas-wrapper-message').html('');
// Create chart
createChart_reason_bar();
})
.always(function( jsonData ) {
//console.log('I am always..');
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Create chart - reason code
//=============================================================================
function createChart_reason_bar() {
// Do not show legend if mobile
if ( isMobileText == '*mobile' ) {
$('#downloadPdf').addClass('d-none');
maxRotationValue = 90; // Rotate labels
minRotationValue = 90;
} else {
if ( run_as_overview == 'N' ) {
$('#downloadPdf').removeClass('d-none');
}
maxRotationValue = 75; // No rotate
minRotationValue = 75;
}
var mode = $('#mode-input').val();
if ( mode == '*count' ) {
renderText = '#000';
} else {
renderText = '#fff';
}
var color = barColor;
var barChartData = {
labels: barData1,
datasets: [
{
label: barLabelText,
backgroundColor: barColor,
borderWidth: 1,
data: barData
}
]
};
const ccc = {
type: 'bar',
data: {
labels: barData1,
datasets: [
{
type: 'line',
label: barLabelText,
data: barData2,
yAxisID: 'y1',
fill: false,
backgroundColor: barColor,
borderWidth: 1,
cubicInterpolationMode: 'monotone',
tension: 0.4,
},
{
yAxisID: 'y2',
type: 'bar',
label: barLabelText,
backgroundColor: barColor,
borderWidth: 1,
data: barData,
barPercentage: 0.9,
categoryPercentage: 0.9
}
]},
options:
{
responsive: true,
maintainAspectRatio: false,
plugins: {
labels: {
render: 'value',
fontSize: 14,
fontStyle: 'bold',
fontColor: renderText,
}
},
tooltips: {
enabled: true,
yPadding: 10,
xPadding: 10,
backgroundColor: '#e8e8e8',
titleFontColor: '#000',
bodyFontColor: '#000',
borderColor: '#ccc',
borderWidth: 2,
position: 'nearest',
callbacks: {
label: function(tooltipItem, data) {
//console.log(data)
// console.log(mode)
// console.log(tooltipItem)
// Get mode to control callback value
var mode = $('#mode-input').val();
if ( mode == '*count' ) {
return "<?php echo $datahub_text0002 ?>: " + tooltipItem.yLabel;
}
},
}
},
scales: {
y2: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: 'Stop årsager'
},
ticks: {
beginAtZero: false,
stepSize: 1000000,
fontColor: '#ffbaa2',
callback: function(value, index, values) {
return value + ' %';
}
},
grid: {
display: false
}
},
y1: {
//position: 'right',
//display: true,
type: 'linear',
position: 'right',
display: true,
min: 0,
max: 100,
ticks: {
beginAtZero: true,
stepSize: 10,
fontColor: '#ffbaa2',
callback: function(value, index, values) {
return value + ' %';
}
},
title: {
display: true,
text: 'Pareto %'
}
},
xAxes:
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 80
}
}
},
legend:
{
display: false,
position: 'bottom',
},
title:
{
display: true,
text: bar_title_header,
fontSize: 20
},
animation: {
animateScale: true,
duration: durationTime
},
}
};
// Setup the chart
const config = {
//type: 'line',
data: {
labels: barData1,
datasets:
[{
yAxisID: 'y1',
label: 'Stop årsager',
type: 'bar',
data: barData,
backgroundColor: barColor,
borderWidth: 1,
order: 10,
barPercentage: 0.8,
categoryPercentage: 0.8,
datalabels: {
display: false,
}
},
{
yAxisID: 'y2',
type: 'line',
label: 'Pct',
data: barData2,
borderColor: '#2B6699',
order: 5,
cubicInterpolationMode: 'monotone',
tension: 0.4,
datalabels: {
display: dftDisplayLablesOnParetoChartOnBarChart,
backgroundColor: '#2B6699',
borderColor: '#000',
borderWidth: 1,
borderRadius: 4,
color: 'white',
font: {
weight: 'bold'
},
//formatter: Math.round,
padding: 4,
formatter: function(value, context) {
let new_value = value.toFixed(0) + '%';
return new_value;
}
},
}
]},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: true,
yPadding: 10,
xPadding: 10,
backgroundColor: '#e8e8e8',
titleFontColor: '#000',
bodyFontColor: '#000',
borderColor: '#ccc',
borderWidth: 2,
position: 'nearest',
callbacks: {
label: function(tooltipItem, data) {
var mode = $('#mode-input').val();
if ( mode == '*count' ) {
return "<?php echo $datahub_text0002 ?>: " + tooltipItem.yLabel;
}
},
}
},
plugins: {
// Change options for ALL labels of THIS CHART
legend:
{
display: false,
position: 'bottom',
},
title: {
display: true,
text: bar_title_header,
font: {
size: 20,
}
},
labels: {
display: true,
render: 'value',
fontSize: 14,
fontStyle: 'bold',
fontColor: renderText,
}
},
scales: {
y1: {
type: 'linear',
position: 'left',
beginAtZero: true,
title: {
display: true,
text: 'Stop årsager'
},
ticks: {
display: dftDisplayTicksOnRightSideBarChartForTime,
beginAtZero: false,
fontColor: '#ffbaa2',
},
grid: {
display: false
}
},
y2: {
display: displayPareto,
type: 'linear',
position: 'right',
min: 0,
max: 100,
ticks: {
beginAtZero: true,
stepSize: 10,
fontColor: '#ffbaa2',
callback: function(value, index, values) {
return value + ' %';
}
},
title: {
display: true,
text: 'Pareto %'
}
},
xAxes:
{
ticks:
{
autoSkip: false,
maxRotation: 90,
minRotation: 75
}
}
}
}
};
// Render init block
var ctx = document.getElementById('show-chart-here').getContext('2d');
chart_bar = new Chart(ctx,config);
}
//=============================================================================
// Get status detail data
//=============================================================================
function getStatusDetails( fk_reason, myID )
{
// Set button
$('.line-trans-button-list').removeClass('btn-success').addClass('btn-primary');
$('#'+myID).removeClass('btn-primary').addClass('btn-success');
// Show card and data
$('#card-result-area-table-2').removeClass('d-none');
$('#data-result-trans').html('<?php echo $datahub_text0003 ?>').addClass('text-center');
// Set javascript variables
var fk_reference = <?php echo $fk_reference ?>;
var mode = '<?php echo $datamode ?>';
var fromDate = '<?php echo $fromDate ?>';
var toDate = '<?php echo $toDate ?>';
var list_mode_input = '';
var input_line_status = '';
if ( fk_reason == '*all' ) {
input_line_status = fk_reason;
fk_reason = 0;
} else {
input_line_status = '';
fk_reason = fk_reason;
}
// Create param list
parmData = 'fk_reference=' + fk_reference
+ '&fk_reason=' + fk_reason
+ '&fromdate=' + fromDate
+ '&todate=' + toDate
+ '&list_mode_input=' + list_mode_input
+ '&line_status=' + input_line_status
+ '&referenceString=' + global_referenceString
+ '&referenceStringName=' + global_referenceStringName
+ '&referenceStringNamePretty=' + global_referenceStringNamePretty
+ '&detail_mode=' + '*REASON'
;
$.ajax({
//url: 'list_status_pie_data_trans.php',
url: 'list_data_trans_workfile.php',
type: 'GET',
data: parmData,
dataType: 'json',
cache: false,
beforeSend: function( xhr ) {
}
})
.done(function( jsonData ) {
var returnCode = jsonData.header.returnCode;
var returnMsg = jsonData.header.returnMsg;
var entries_found = jsonData.header.entries_found;
prv_seconds_total = jsonData.header.prv_seconds_total;
prv_seconds_total_text = jsonData.header.prv_seconds_total_text;
prv_seconds_int_total = jsonData.header.prv_seconds_int_total;
prv_seconds_int_total_text = jsonData.header.prv_seconds_int_total_text;
sql = jsonData.header.sql;
$('#sql').text(sql);
$('#ent').text(entries_found);
// Reset
HTMLline03 = '<table id="REEFTvisual_trans_data_status" class="table table-bordered table-striped table-hover">';
HTMLline03 += '<thead>'
+ '<tr class="bg-primary text-white font-weight-bold text-left">'
+ '<th>'
+ '<?php echo "$datahub_text0028"?>'
+ '</th>'
+ '<td class="text-left">'
+ '<?php echo "$datahub_text0107 / $datahub_text0108_lower"?>'
+ '</th>'
+ '<th>'
+ '<?php echo "$datahub_text0011"?>'
+ '</th>'
+ '<th>'
+ '<?php echo "$datahub_text0025"?>'
+ '</th>'
+ '<th>'
+ '<?php echo "$datahub_text0101"?>'
+ '</th>'
+ '<th>'
+ '<?php echo "$datahub_text0173" ?>'
+ '</th>'
+ '</tr>'
+ '</thead>'
+ '<tbody>'
;
$.each( jsonData.detail, function( index, object ){
var pk_line_status = object.pk_line_status;
var line_status = object.line_status;
var line_status_text = object.line_status_text;
var prv_seconds = object.prv_seconds;
var prv_seconds_int = object.prv_seconds_int;
var timestamp = object.timestamp;
var timestamp_iso = object.timestamp_iso;
var timestamp_dmy = object.timestamp_dmy;
var prv_seconds_text = object.prv_seconds_text;
var active_status = object.active_status;
var reasontext = object.reasontext;
var reason_comment = object.reason_comment;
var status_has_image = object.status_has_image;
if ( active_status == 1 ) {
active_status_text = ' <i style="color:green" class="fa-regular fa-left"></i> <strong><?php echo $datahub_text0149 ?></strong>';
} else {
active_status_text = '';
}
// Pictures are found
if ( status_has_image == 1 ) {
HTMLline03_image_button = '<button type="button" class="btn btn-block btn-primary" onclick=viewImage(\'' + pk_line_status + '\')><?php echo $datahub_text0169 ?></button>';
} else {
HTMLline03_image_button = '';
}
HTMLline03 += '<tr>'
+ '<td class="text-left">'
+ line_status_text + active_status_text
+ '</td>'
+ '<td data-sort="' + timestamp_iso + '" class="text-left">'
+ timestamp_dmy
+ '</td>'
+ '<td class="text-left">'
+ '<span title="' + prv_seconds + '">' + prv_seconds_text + '</span>'
+ '</td>'
+ '<td class="text-left">'
+ reasontext
+ '</td>'
+ '<td class="text-left">'
+ reason_comment
+ '</td>'
+ '<td style="width:75px" class="text-center">'
+ HTMLline03_image_button
+ '</td>'
+ '</tr>'
;
});
HTMLline03 += '</tbody>'
+ '<tfooter>'
+ '<tr class="bg-primary text-white">'
+ '<td class="text-left font-weight-bold">'
+ '<?php echo $datahub_text0022 ?>'
+ '</td>'
+ '<td>' + '</td>'
+ '<td class="text-left font-weight-bold">'
+ prv_seconds_int_total_text
+ '</td>'
+ '<td>' + '</td>'
+ '<td>' + '</td>'
+ '<td>' + '</td>'
+ '</tr>'
;
HTMLline03 += '</tfooter>'
+ '</table>'
// Show yourself to the world, you little fvcker
$('#data-result-trans').html(HTMLline03);
// Datatables
setDataTablesLineStatus();
// Scroll down
scrollToSomething('data-result-trans');
})
.always(function( xml ) {
//console.log('I am always..');
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Set datatables
//=============================================================================
function setDataTablesReason()
{
$('#REEFTvisual_data').DataTable({
"responsive": true,
"fixedHeader": false,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 25,
"processing": true,
"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
"order": [[ 1, "desc" ]],
"columnDefs": [
{
"targets": [ 3 ],
"visible": true,
"searchable": false,
"orderable": false
}
],
"language":
{
"sProcessing": "<?php echo $datahub_datatable_Processing ?>",
"sLengthMenu": "<?php echo $datahub_datatable_LengthMenu ?>",
"sZeroRecords": "<?php echo $datahub_datatable_ZeroRecords ?>",
"sInfo": "<?php echo $datahub_datatable_Info ?>",
"sInfoEmpty": "<?php echo $datahub_datatable_InfoEmpty ?>",
"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
"sInfoPostFix": "<?php echo $datahub_datatable_InfoPostFix ?>",
"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
"sSearch": "<?php echo $datahub_datatable_Search ?>",
"sUrl": "<?php echo $datahub_datatable_Url ?>",
"oPaginate": {
"sFirst": "<?php echo $datahub_datatable_First ?>",
"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
"sNext": "<?php echo $datahub_datatable_Next ?>",
"sLast": "<?php echo $datahub_datatable_Last ?>"
}
},
"rowCallback": function(row, data, index)
{
},
"preDrawCallback": function(settings)
{
},
"initComplete": function ()
{
},
"buttons": [
{
title: 'REEFTvisual_data_PDF',
extend: 'pdf',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
title: 'REEFTvisual_data_Excel',
extend: 'excel',
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
},
{
extend: 'copy',
text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
},
{
extend: 'csv',
className: 'datatables_csv_button',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0, 1, 2]
},
bom: true,
header: true,
filename: function(){
// Create filename
var csv_file_name = 'list_data_reason' + '_' + moment().format('YYYY-MM-DD_HH-mm-ss');
return csv_file_name;
},
fieldSeparator: DFT_EXPORT_TO_CSV_FIELDSEPARATOR,
text: '<img src="images/csv_logo.png" height="25"> CSV file'
}
]
});
// Export to CSV active?
// I have to reverse it due the nature of datatables
// Note the class name is add under the extend: 'csv'
if ( DFT_EXPORT_TO_CSV == 'N' ) {
$('.datatables_csv_button').addClass('d-none');
}
// Set header
//$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + global_referenceStringNamePretty + ' - ' + fromDate + ' / ' + toDate + '</div></caption>');
$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');
}
//=============================================================================
// Set datatables - line status
//=============================================================================
function setDataTablesLineStatus()
{
// Show image column
if ( global_DFT_ACTIVE_ADD_IMAGE == 'Y' ) {
var bool_DFT_ACTIVE_ADD_IMAGE = true;
} else {
var bool_DFT_ACTIVE_ADD_IMAGE = false;
}
$('#REEFTvisual_trans_data_status').DataTable({
"responsive": true,
"fixedHeader": false,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100]],
"iDisplayLength": 25,
"processing": true,
"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
"order": [[ 1, "desc" ]],
"columnDefs": [
{
"targets": [ 0,1,2 ],
"visible": true,
"searchable": true,
"orderable": true
},
{
"targets": [ 5 ],
"visible": bool_DFT_ACTIVE_ADD_IMAGE,
"searchable": false,
"orderable": false
}
],
"language":
{
"sProcessing": "<?php echo $datahub_datatable_Processing ?>",
"sLengthMenu": "<?php echo $datahub_datatable_LengthMenu ?>",
"sZeroRecords": "<?php echo $datahub_datatable_ZeroRecords ?>",
"sInfo": "<?php echo $datahub_datatable_Info ?>",
"sInfoEmpty": "<?php echo $datahub_datatable_InfoEmpty ?>",
"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
"sInfoPostFix": "<?php echo $datahub_datatable_InfoPostFix ?>",
"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
"sSearch": "<?php echo $datahub_datatable_Search ?>",
"sUrl": "<?php echo $datahub_datatable_Url ?>",
"oPaginate": {
"sFirst": "<?php echo $datahub_datatable_First ?>",
"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
"sNext": "<?php echo $datahub_datatable_Next ?>",
"sLast": "<?php echo $datahub_datatable_Last ?>"
}
},
"rowCallback": function(row, data, index)
{
},
"preDrawCallback": function(settings)
{
},
"initComplete": function ()
{
},
"buttons": [
{
title: 'REEFTvisual_trans_data_status_PDF',
extend: 'pdf',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
extend: 'excel',
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel',
title: 'REEFTvisual_trans_data_status_Excel'
},
{
extend: 'copy',
text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
},
{
extend: 'csv',
className: 'datatables_csv_button',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0, 1, 2, 4]
},
bom: true,
header: true,
filename: function(){
// Create filename
var csv_file_name = 'list_data_reason_details' + '_' + moment().format('YYYY-MM-DD_HH-mm-ss');
return csv_file_name;
},
fieldSeparator: DFT_EXPORT_TO_CSV_FIELDSEPARATOR,
text: '<img src="images/csv_logo.png" height="25"> CSV file'
}
]
});
// Export to CSV active?
// I have to reverse it due the nature of datatables
// Note the class name is add under the extend: 'csv'
if ( DFT_EXPORT_TO_CSV == 'N' ) {
$('.datatables_csv_button').addClass('d-none');
}
$('#REEFTvisual_trans_data_status').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');
// var referenceName = $('#reference-name-input').val();
// if ( isMobileText == '*mobile') {
// var fromDate = $('#fromdate-html5').val() + ' ' + $('#fromtime-html5').val();
// var toDate = $('#todate-html5').val() + ' ' + $('#totime-html5').val();
// } else {
// var fromDate = $('#fromdate').val();
// var toDate = $('#todate').val();
// }
}
//=============================================================================
// Log off
//=============================================================================
function signoff()
{
window.location.href = "logout.php";
}
//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{
window.location.href = url;
}
//=============================================================================
// Set mode
//=============================================================================
function setMode( mode,btn_id ) {
$('#set-as-seconds,#set-as-count,#set-as-seconds1,#set-as-count1').removeClass('btn-success').addClass('btn-primary');
$('#mode-input').val(mode);
$('#info1').html(' ');
if ( mode == '*seconds') {
$('#' + btn_id).addClass('btn-success');
}
if ( mode == '*count') {
$('#' + btn_id).addClass('btn-success');
}
}
//=============================================================================
// Set default date
//=============================================================================
function setDefaultDate( defaultHours ) {
// Set default from/to date
default_fromDate = moment().subtract(defaultHours, 'hours').format("YYYY-MM-DD HH:mm");
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
// After animation
$('#fromdateX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function() {
$('#fromdateX').removeClass( 'animated pulse border border-danger rounded' );
}
);
default_toDate = moment().add(0, 'days').add(10, 'minutes').subtract(0, 'year').format("YYYY-MM-DD HH:mm");
$('#todate').datetimepicker('date', default_toDate );
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
$('#todate').datetimepicker('date', default_toDate );
}
//=============================================================================
// Scroll to something
//=============================================================================
function scrollToSomething( target )
{
//if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
if ( isMobileText == '*mobile') {
window.scrollTo(100,600) // first value for left offset, second value for top offset
} else {
thisID = '#' + target;
$.scrollTo( thisID, 1000);
}
}
//=============================================================================
// Create PDF
//=============================================================================
function downloadPDF() {
// Get size of report page
var reportPageHeight = $('#canvas-wrapper').innerHeight();
var reportPageWidth = $('#canvas-wrapper').innerWidth();
// Create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// Keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// For each chart.js chart
$("canvas").each(function(index) {
// Get the chart height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// Draw the chart into the new canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// Our report page is in a grid pattern so replicate that in the new canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// Create new pdf and add our new canvas as an image
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// download the pdf
//pdf.save('filename.pdf');
//pdf.save('reason_bar.pdf');
pdf.save(chartPDFname);
}
//=============================================================================
// Make first letter uppercase
//=============================================================================
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//=============================================================================
// Reset messasge
//=============================================================================
function resetMessage()
{
$('#message-text').html('').removeClass('border border-danger rounded font-weight-bold mt-2 mb-1 p-2');
}
//=============================================================================
// View images
//=============================================================================
function viewImage( pk_line_status )
{
// Create parameter string
var parmData = 'input_fk_line_status=' + pk_line_status
;
var url = 'images_maintain_view.php' + '?' + parmData
popUpCenter(url, '','','','');
}
//=============================================================================
// Full screen popup
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
if ( parseInt(v1_w) > 1800 ) {
v1_w = 1800;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
}
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
overview_win = window.open(url,winname, params);
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// Run as overview
//=============================================================================
function runAsOverviewChart()
{
// Wait 1.5 seconds before any chart work will be done
setTimeout(function() {
// Set back time
//setDefaultDate(backTime);
$('#mode-input').val(dataMode);
$('#chart-mode').val('*CREATE');
if ( showChart == '*REASON') {
getData_reason_bar();
}
else if ( showChart == '*PIE') {
getData( global_fk_reference, global_referenceString, global_referenceStringName, global_referenceStringNamePretty, global_fromDate, global_toDate)
}
setInterval(function(){
//setDefaultDate(backTime);
$('#chart-mode').val('*UPDATE');
if ( showChart == '*REASON') {
getData_reason_bar();
}
else if ( showChart == '*PIE') {
getData_REASON( global_fk_reference, global_referenceString, global_referenceStringName, global_referenceStringNamePretty, global_fromDate, global_toDate)
}
}, parseInt(updateSeq) * 1000 );
}, 1200);
}
//=============================================================================
// Set clock
//=============================================================================
function updateClock() {
$('#current-time').html(moment().format('DD-MM-YYYY HH:mm:ss'));
var number = $('#overview-update-marker').text();
var number = parseInt(number) - 1;
if ( number == 0 ) {
$('#overview-update-marker').html('<i class="text-success fa-solid fa-circle"></i>');
} else {
$('#overview-update-marker').html( number );
}
}
//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{
// Change size if overview
if ( run_as_overview == 'Y' ) {
$('.hide-me-when-i-am-running-as-overview').addClass('d-none');
$('#card-result-area').removeClass('card');
$('#canvas-wrapper').css('height',DFT_CANVAS_HEIGHT);
// Remove card-body on id card-result-area-body to save som padding space in iframe on the operator view
$('#card-result-area-body').removeClass('card-body');
} else {
$('#card-main-area').addClass('d-none');
$('#canvas-wrapper').css('height','600px');
}
// Start the clock
updateClock();
setInterval(updateClock, 1000);
// Set input fields
$('#fk_reference-input').val(<?php echo $fk_reference ?>);
$('#mode-input').val('<?php echo $datamode ?>');
$('#fromdate').val('<?php echo $fromDate ?>');
$('#todate').val('<?php echo $toDate ?>');
//setMode('<?php echo $datamode ?>','set-as-seconds1');
//-----------------------------------------------------------------------
// Set font awesome icon type
//-----------------------------------------------------------------------
// Value is from config/config.php
var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
setFontAwesomeIconType( iconType );
//-----------------------------------------------------------------------
run_as_overview = 'N';
if ( run_as_overview == 'N' ) {
//getData_REASON( global_fk_reference, global_referenceString, global_referenceStringName, global_referenceStringNamePretty, global_fromDate, global_toDate)
processReasonData( global_fk_reference, global_referenceString, global_referenceStringName, global_referenceStringNamePretty, global_fromDate, global_toDate)
}
var w = $('#card-result-area-body').width();
// Set with of chart holder
//$('#show-chart-here-size').width( w )
if ( run_as_overview == 'Y' ) {
runAsOverviewChart();
}
// Set short cuts
shortcut.add("Esc",function() {
window.close();
});
// Register the plugin to all charts:
Chart.register(ChartDataLabels);
});
// -->
</script>
</head>
<body>
<div class="container-fluid mt-2 pl-3 pr-3">
<input class="d-none" type="text" id="fk_reference-input">
<input class="d-none" type="text" id="mode-input">
<input class="d-none" type="text" id="reference-code-input">
<input class="d-none" type="text" id="reference-name-input">
<input class="d-none" type="text" id="chart-mode">
<input class="d-none" type="text" id="list-mode-input">
<input class="d-none" type="text" id="current-DFT_SHIFT_NR">
<input class="d-none" type="text" id="current-DFT_SHIFT_NAME">
<div class="row hide-me-when-i-am-running-as-overview">
<div class="col-2">
<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
</div>
<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
<i title="<?php echo $session_rand ?>" class="font-awesome-pseudo-class fa-thin fa-clock"></i> <span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
</div>
<div class="col-2 text-right">
<div id="home-button" class="btn btn-primary" onclick="window.close()" title="<?php echo $visual_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
<div class="d-none" id="overview-update-marker"></div>
</div>
</div>
<div class="card border-muted mb-2" id="card-result-area">
<div class="card-body" id="card-result-area-body">
<div>
<div class="row">
<div class="col-12 text-right">
<button class="btn btn-primary d-none" onclick="downloadPDF()" id="downloadPdf">Download PDF</button>
</div>
</div>
<div class="row">
<div class="col mt-2">
<div id="canvas-wrapper-message"></div>
<div id="canvas-wrapper" style="width:100%" class="">
<canvas id="show-chart-here"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card border-muted mb-2 hide-me-when-i-am-running-as-overview" id="card-result-area-table-1">
<!-- table with sum figures -->
<div class="card-body" id="table-header-data">
<div id="html-buttons-goes-here" class="mb-2 text-center hide-me-when-i-am-running-as-overview"></div>
<div id="data-result" class="hide-me-when-i-am-running-as-overview"></div>
</div>
</div>
<div class="card border-muted mb-2 d-none" id="card-result-area-table-2">
<div class="d-none" id="sql"></div>
<div class="d-none" id="ent"></div>
<!-- table with detail transactions -->
<div class="card-body">
<div id="data-result-trans"></div>
</div>
</div>
<!-- pseodu empty col -->
<div class="col-2 div-spreder hide-me-when-i-am-running-as-overview">
</div>
</div>
<!-- ======================================================================================== -->
<!-- Might surface if an ajax call fails -->
<!-- ======================================================================================== -->
<div id="error-text-wrapper" class="d-none">
<div class="border border-danger rounded p-2 bg-light" id="error-text-ajax-call"></div>
</div>
<!-- ======================================================================================== -->
</div>
<!-- Set footer -->
<span id="footer-id" class="hide-me-when-i-am-running-as-overview">
<?php
include "include/footer.php";
?>
</span>
<!-- Set footer -->
<!-- ========================================================================== -->
<!-- M O D A L S -->
<!-- ========================================================================== -->
</body>
</html>